<template>
	<div id="app">
		<cmp-header v-show="headerType == 'default'"></cmp-header>
		<cmp-infoHeader v-show="headerType == 'info'"></cmp-infoHeader>
		<cmp-staffHeader v-show="headerType == 'staff'"></cmp-staffHeader>
		<cmp-readHeader v-show="headerType == 'read'"></cmp-readHeader>
		<cmp-matchHeader v-show="headerType == 'match'"></cmp-matchHeader>
		<transition mode="out-in" :name="transitionName">
			<router-view />
		</transition>

		<cmp-copyRight></cmp-copyRight>
	</div>
</template>
<script>
	import cmpHeader from '@/components/cmp-header'
	import cmpInfoHeader from '@/components/cmp-InfoHeader'
	import cmpStaffHeader from '@/components/cmp-staffHeader'
	import cmpReadHeader from '@/components/cmp-readHeader'
	import cmpMatchHeader from '@/components/cmp-matchHeader'
	import cmpCopyRight from '@/components/cmp-copyRight'
	export default {
		data() {
			return {
				transitionName: 'fade-left',
				headerType: this.$route.meta.header || 'default',
			}
		},
		created() {},
		components: {
			cmpHeader,
			cmpCopyRight,
			cmpInfoHeader,
			cmpStaffHeader,
			cmpReadHeader,
			cmpMatchHeader
		},
		watch: {
			$route() {
				// let type = 
				this.headerType = this.$route.meta.header || 'default'
			}
		}
	}
</script>
<style lang="less">
	#app {
		padding-top: 60px;
	}

	.fade-left-enter-active,
	.fade-right-enter-active {
		transition: all 0.08 ease;
	}

	.fade-left-leave-active,
	.fade-right-leave-active {
		transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
	}

	.fade-left-leave-to,
	.fade-right-enter {
		transform: translate3d(-50%, 0, 0);
		opacity: 0;
	}

	.fade-left-enter,
	.fade-right-leave-to {
		transform: translate3d(50%, 0, 0);
		opacity: 0;
	}

	.image-slot {
		width: 100%;
		height: 100%;

		img {
			width: 100%;
			height: 100%;
		}
	}
</style>